$(function () {


  //设备监听事件 
  (function () {
    $('.tabs').on('click', 'a', function () {
      $(this).addClass('active').siblings().removeClass('active')
      $('.content ').eq($(this).index()).show().siblings('.content').hide()
    })
    //复制一组数据到最后
    $(".marquee-view .marquee").each(function () {
      //将row找出来  添加到最后 
      var rows = $(this).children().clone();
      $(this).append(rows);
    });

  }());



  //饼状图
  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie"))
    // 2. 指定配置项和数据
    var option = {

      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },


      series: [

        {
          name: '点位统计',
          type: 'pie',
          radius: ['10%', '70%'],// 设置半径
          center: ['50%', '50%'], //设置位置
          roseType: 'radius', //设置显示模式  
          color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
          label: {
            fontSize: 10
          },
          labelLine: {
            length: 6,  // 连接扇形图线长
            length2: 8 // 连接文字线长
          },
          data: [
            { value: 20, name: '云南' },
            { value: 26, name: '北京' },
            { value: 24, name: '山东' },
            { value: 25, name: '河北' },
            { value: 20, name: '江苏' },
            { value: 25, name: '浙江' },
            { value: 30, name: '四川' },
            { value: 42, name: '湖北' }
          ]
        }
      ]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option)
    // 监听浏览器缩放，图表对象调用缩放resize函数
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();




  //用户数量统计
  (function () {

    var myChart = echarts.init(document.querySelector('.bar'))
    var item = {
      name: '',
      value: 1200,
      // 柱子颜色
      itemStyle: {
        color: '#254065'
      },
      // 鼠标经过柱子颜色
      emphasis: {
        itemStyle: {
          color: '#254065'
        }
      },
      // 工具提示隐藏
      tooltip: {
        extraCssText: 'opacity:0'
      },
    }
    var option = {
      color: new echarts.graphic.LinearGradient(
        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "#00fffb" }, // 0 起始颜色
          { offset: 1, color: "#0061ce" } // 1 结束颜色
        ]
      ),
      tooltip: {
        trigger: "item"
      },
      grid: {
        left: "0%",
        right: "3%",
        bottom: "3%",
        top: "3%",
        //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
        containLabel: true,
        // 是否显示直角坐标系网格
        show: true,
        //grid 四条边框的颜色
        borderColor: "rgba(0, 240, 255, 0.3)"
      },
      // 控制x轴
      xAxis: [
        {
          type: "category",
          data: [
            "上海",
            "广州",
            "北京",
            "深圳",
            "合肥",
            "",
            "......",
            "",
            "杭州",
            "厦门",
            "济南",
            "成都",
            "重庆"
          ],
          axisTick: {
            alignWithLabel: false,
            // 把x轴的刻度隐藏起来
            show: false
          },
          axisLabel: {
            color: "#4c9bfd"
          },
          // x轴这条线的颜色样式
          axisLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)"
              // width: 3
            }
          }
        }
      ],
      // 控制y轴
      yAxis: [
        {
          type: "value",
          axisTick: {
            alignWithLabel: false,
            // 把y轴的刻度隐藏起来
            show: false
          },
          axisLabel: {
            color: "#4c9bfd"
          },
          // y轴这条线的颜色样式
          axisLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)"
              // width: 3
            }
          },
          // y轴分割线的颜色样式
          splitLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)"
            }
          }
        }
      ],
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
        }
      ]
    }


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 监听浏览器缩放，图表对象调用缩放resize函数
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();

  //订单模块
  (function () {

    var data = {
      day365: { orders: '20,301,987', amount: '99834' },
      day90: { orders: '301,987', amount: '9834' },
      day30: { orders: '1,987', amount: '3834' },
      day1: { orders: '987', amount: '834' }
    }
    $('.filter a').click(function () {
      $(this).addClass('active').siblings().removeClass('active')
      $('.dingdan').text(data[this.dataset.index].orders)
      $('.xiaoshou').text(data[this.dataset.index].amount)
      index = $(this).index()
    })
    var index = 0
    var timer = setInterval(function () {
      $('.filter a')[index].click()
      index++
      index = index >= 4 ? 0 : index
    }, 1000)
    $('.order').hover(function () {
      clearInterval(timer)
    }, function () {
      clearInterval(timer)
      timer = setInterval(function () {
        $('.filter a')[index].click()
        index++
        index = index >= 4 ? 0 : index
      }, 1000)
    })

  })();


  //曲线图模块
  (function () {
    var myChart = echarts.init(document.querySelector(".line"));
    var data = {
      year: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ],
      quarter: [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
      ],
      month: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
      ],
      week: [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
      ]

    }
    var option = {
      tooltip: {
        trigger: "axis"
      },
      // 图例组件
      legend: {
        textStyle: {
          color: '#4c9bfd' // 图例文字颜色
        },
        right: '10%' // 距离右边10%
      },

      // 设置网格样式
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        show: true,// 显示边框
        borderColor: '#012f4a',// 边框颜色
        containLabel: true // 包含刻度文字在内
      },

      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisTick: {
          show: false // 去除刻度线
        },
        axisLabel: {
          color: '#4c9bfd' // 文本颜色
        },
        axisLine: {
          show: false // 去除轴线
        },
        boundaryGap: false  // 去除轴内间距
      },

      yAxis: {
        type: 'value',
        axisTick: {
          show: false  // 去除刻度
        },
        axisLabel: {
          color: '#4c9bfd' // 文字颜色
        },
        splitLine: {
          lineStyle: {
            color: '#012f4a' // 分割线颜色
          }
        }
      },

      color: ['#00f2f1', '#ed3f35'],

      series: [{
        name: '预期销售额',
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        type: 'line',
        smooth: true
      }, {
        name: '实际销售额',
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        type: 'line',
        smooth: true
      }
      ]
    }
    myChart.setOption(option);
    // 监听浏览器缩放，图表对象调用缩放resize函数
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var index = 0
    $('.caption a ').click(function () {
      $(this).addClass('active').siblings('a').removeClass('active')
      option.series[0].data = data[this.dataset.type][0]
      option.series[1].data = data[this.dataset.type][1]
      myChart.setOption(option);
      index = $(this).index() - 1
    })

    var timer = setInterval(function () {
      $('.caption a ')[index].click()
      index++
      index = index >= 4 ? 0 : index

    }, 1000)
    $('.sales .chart ,.caption a').hover(function () {
      clearInterval(timer)
      console.log(1);
    }, function () {
      clearInterval(timer)
      timer = setInterval(function () {
        $('.caption a ')[index].click()
        index++
        index = index >= 4 ? 0 : index

      }, 1000)
      console.log(2);
    })


  })();

  // 销售渠道模块 雷达图
  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".radar"));
    // 2.指定配置

    var option = {
      tooltip: {

        trigger: 'item',
        show: true,
        // 控制提示框组件的显示位置
        position: ["50%", "2%"],
        textStyle: {
          color: 'green'
        }
      },

      radar: {

        indicator: [
          { name: "机场", max: 100 },
          { name: "商场", max: 100 },
          { name: "火车站", max: 100 },
          { name: "汽车站", max: 100 },
          { name: "地铁", max: 100 }
        ],

        // 修改雷达图的大小
        radius: "58%",
        shape: "circle",
        // 分割的圆圈个数
        splitNumber: 4,
        name: {
          // 修饰雷达图文字的颜色
          textStyle: {
            color: "#4c9bfd"
          }
        },
        // 分割的圆圈线条的样式
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255, 0.5)"
          }
        },
        splitArea: {
          show: false
        },
        // 坐标轴的线修改为白色半透明
        axisLine: {

          lineStyle: {
            color: "rgba(255, 255, 255, 0.5)"
          }

        }
      },
      series: [

        {
          name: "北京",
          type: "radar",
          // 填充区域的线条颜色
          lineStyle: {
            normal: {
              color: "#fff",
              width: 1,
              opacity: 0.5
            }
          },
          data: [[90, 19, 56, 11, 34]],
          // 设置图形标记 （拐点）
          symbol: "circle",
          // 这个是设置小圆点大小
          symbolSize: 5,
          // 设置小圆点颜色
          itemStyle: {
            color: "#fff"
          },
          // 让小圆点显示数据
          label: {
            show: true,
            fontSize: 10
          },
          // 修饰我们区域填充的背景颜色
          areaStyle: {
            color: "rgba(238, 197, 102, 0.6)"
          }
        }

      ]
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();

  //饼状图
  (function () {
    var myChart = echarts.init(document.querySelector(".gauge"));

    var option = {
      grid: {
        left: "3%",
        right: "3%",
        bottom: "3%",
        containLabel: true
      },
      series: [
        {
          name: "一般",
          type: "pie",
          //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
          startAngle: 0,
          hoverAnimation: false,
          tooltip: {},
          radius: ['130%', '150%'],
          // 移动下位置  套住50%文字
          center: ['48%', '80%'],
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {
              value: 300,
              itemStyle: {
                normal: {
                  color: "rgba(80,150,224,0)"
                }
              }
            },
            {
              value: 125,  // 渐变色部分
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#FFDE00" },
                  { offset: 0.5, color: "#00ECD9" },
                  { offset: 1, color: "#00ECD9" }
                ])
              },
            },
            {
              value: 175, // 右侧部分
              itemStyle: {
                normal: {
                  color: "#0C5071"
                }
              }
            }
          ]
        }
      ]
    }
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();


  //销售排行部分
  (function () {

    var hotData = [
      {
        city: '北京',  // 城市
        sales: '25, 179',  // 销售额
        flag: true, //  上升还是下降
        brands: [   //  品牌种类数据
          { name: '可爱多', num: '9,086', flag: true },
          { name: '娃哈哈', num: '8,341', flag: true },
          { name: '喜之郎', num: '7,407', flag: false },
          { name: '八喜', num: '6,080', flag: false },
          { name: '小洋人', num: '6,724', flag: false },
          { name: '好多鱼', num: '2,170', flag: true },
        ]
      },
      {
        city: '河北',
        sales: '23,252',
        flag: false,
        brands: [
          { name: '可爱多', num: '3,457', flag: false },
          { name: '娃哈哈', num: '2,124', flag: true },
          { name: '喜之郎', num: '8,907', flag: false },
          { name: '八喜', num: '6,080', flag: true },
          { name: '小洋人', num: '1,724', flag: false },
          { name: '好多鱼', num: '1,170', flag: false },
        ]
      },
      {
        city: '上海',
        sales: '20,760',
        flag: true,
        brands: [
          { name: '可爱多', num: '2,345', flag: true },
          { name: '娃哈哈', num: '7,109', flag: true },
          { name: '喜之郎', num: '3,701', flag: false },
          { name: '八喜', num: '6,080', flag: false },
          { name: '小洋人', num: '2,724', flag: false },
          { name: '好多鱼', num: '2,998', flag: true },
        ]
      },
      {
        city: '江苏',
        sales: '23,252',
        flag: false,
        brands: [
          { name: '可爱多', num: '2,156', flag: false },
          { name: '娃哈哈', num: '2,456', flag: true },
          { name: '喜之郎', num: '9,737', flag: true },
          { name: '八喜', num: '2,080', flag: true },
          { name: '小洋人', num: '8,724', flag: true },
          { name: '好多鱼', num: '1,770', flag: false },
        ]
      },
      {
        city: '山东',
        sales: '20,760',
        flag: true,
        brands: [
          { name: '可爱多', num: '9,567', flag: true },
          { name: '娃哈哈', num: '2,345', flag: false },
          { name: '喜之郎', num: '9,037', flag: false },
          { name: '八喜', num: '1,080', flag: true },
          { name: '小洋人', num: '4,724', flag: false },
          { name: '好多鱼', num: '9,999', flag: true },
        ]
      }
    ]
    var supList = ''
    $.each(hotData, function (i, ele) { //遍历数组 模拟动态实时获取展示数据
      supList += `<li>
      <span>${ele.city}</span>
      <span>${ele.sales} <s class="${ele.flag ? 'icon-up' : 'icon-down'}"></s></span>
      </li>`
    })
    $('.sup').html(supList)

    $('.sup li').mouseenter(function () {

      rander($(this))
      index = $(this).index()
    })
    $('.sup li').eq(0).mouseenter() //默认选中第一个

    function rander(that) { //选中省份 展示右方详情函数 参数为当前哪一个省份
      that.addClass('active').siblings().removeClass('active')

      var subList = ''
      $.each(hotData[that.index()].brands, function (i, ele) {//遍历当前对象中的brands 模拟动态实时获取展示数据
        subList += `<li>
          <span>${ele.name}</span>${ele.num} <span> <s class="${ele.flag ? 'icon-up' : 'icon-down'}"></s></span>
        </li>`
      })
      $('.sub').html(subList)
    }

    var index = 1 //假设从第一个开始
    var timer = setInterval(function () {
      rander($('.sup li').eq(index)) //让第一个的后方详情展示
      index++
      index = index > 4 ? 0 : index
    }, 1000)


    $('.sup li').hover(function () {
      clearInterval(timer)
    }, function () {
      clearInterval(timer)
      timer = setInterval(function () {
        rander($('.sup li').eq(index)) //让第一个的后方详情展示
        index++
        index = index > 4 ? 0 : index
      }, 1000)
    })

  })()

})

